<template>
  <!-- 个人中心 -->
  <div class="personal">
    <!-- 头部样式 -->
    <div class="heade">
      <!-- 用户头像信息 -->
      <div class="userleft">
        <div>
          <img
            src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
            alt=""
          />
        </div>
        <div class="userinfo">
          <span>{{this.$store.state.user.Personalinfo.userName}}</span>
          <div>普通用户</div>
        </div>
      </div>
      <!-- 开通会员和二维码区域 -->
      <div class="userright">
        <!-- 二维码 -->
        <div class="qrcode">
            <!-- 回话框 -->
            <router-link to='/message'>
            <van-icon name="chat-o" badge="9" class="huihua"/>
            </router-link>
          <img
            src="https://tse1-mm.cn.bing.net/th/id/R-C.67008fa94a43dc7b97b0c38360f83eba?rik=dtmFGrTigsEjHA&riu=http%3a%2f%2fimg2.3png.com%2f67008fa94a43dc7b97b0c38360f83eba177d.png&ehk=MMa9tJwqngPjCUx54sO2IW84oY6OBoGTQybzK6OYw9A%3d&risl=&pid=ImgRaw&r=0"
            alt=""
          />
        </div>
        <!-- 开通会员区域 -->
        <div class="prosvip">
          <!-- 圆球 -->
          <div class="circle"><van-icon name="like-o" /></div>
          <div class="text">
            <span>proh会员</span>
            <span> 立即开通</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间样式我的资产 -->
    <div class="middle">
      <!-- 资产标题 -->
      <div class="asetesstitle">
        <!-- 我的资产 -->
        <span class="asetess">我的资产</span>
        <!-- 分割线 -->
        <van-divider
          :style="{ color: '#A8A8A8', borderColor: '#A8A8A8', width: '9.6rem' }"
        >
        </van-divider>
      </div>
      <!-- 资产列表 -->
      <div class="asetesslist">
        <div class="list">
          <div class="lit">
            <span>￥</span>
            0
            </div>
          <div class="text">余额</div>
        </div>
        <div class="list">
          <div>0</div>
          <div class="text">红包</div>
        </div>
        <div class="list">
          <div>0</div>
          <div class="text">优惠群</div>
        </div>
        <div class="list">
          <div>0</div>
          <div class="text">积分</div>
        </div>
        <div class="list">
          <div>0</div>
          <div class="text">礼品卡</div>
        </div>
      </div>
    </div>

    <van-grid :column-num="3">
      <van-grid-item icon="orders-o" text="我的订单" />
      <van-grid-item icon="user-circle-o" text="账号管理" />
      <van-grid-item icon="phone-o" text="我的手机号" />
      <van-grid-item icon="ecard-pay" text="周3一起拼" />
      <van-grid-item icon="bill-o" text="邀请返利" />
      <van-grid-item icon="goods-collect-o" text="优先购" />
      <van-grid-item icon="refund-o" text="积分中心" />
      <van-grid-item icon="vip-card-o" text="会员俱乐部" />
      <van-grid-item icon="flag-o" text="地址管理" @click="jumpaddress" />
      <van-grid-item icon="refund-o" text="支付安全" />
      <van-grid-item icon="service-o" text="帮助与客服" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="cash-back-record" text="售后服务" />
      <van-grid-item icon="hot-o" text="我的竞拍" />
      <van-grid-item />
    </van-grid>
    <!-- 退出登录按钮 -->
    <div class="exitLogin">
      <van-button size="large" hairline plain @click="eximtlogin">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { deletetoken } from '@/utils/auth'
export default {
  name: 'persOnal',
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    eximtlogin() {
      Dialog.confirm({
        message: '退出登录?',
        beforeClose(action, done){
          if (action === 'confirm') {
            setTimeout(done, 100)
            deletetoken()
            this.$bus.$store.commit('removeinfo')
            Dialog.alert({
              message: `退出登录成功`,
            }).then(() => {
              this.$bus.$router.push('/login')
            })
          } else {
            done()
          } 
        }
      })
        .then(() => {})
        .catch(() => {})
    },
    jumpaddress(){
      this.$bus.$router.push('/address')
    }
  },
}
</script>

<style lang="less" scoped>
//全局
.personal {
  background-color: rgb(238, 238, 238);
  //头部 个人信息
  .heade {
    position: relative;
    background-color: #f4c57a;
    background-image: linear-gradient(to right, #f4c57a, #ffdb93);
    //头像 用户名
    .userleft {
      display: flex;
      padding: 0.8rem 0.5rem;
      width: 7rem;
      height: 2rem;
      //用户名
      span {
        font-size: 0.5rem;
        padding: 0.1rem 0;
      }
      img {
        width: 2rem;
        border-radius: 50%;
        margin-right: 0.5rem;
      }
      //头像
      .userinfo {
        font-size: 0.38rem;
        color: rgb(255, 255, 255);
        margin-top: 0.6rem;
      }
    }
    //开通会员处
    .userright {
      width: 3rem;
      height: 2.2rem;
      position: absolute;
      right: 0;
      bottom: 0.5rem;
      //小二维码
      .qrcode {
        position: absolute;
        right: 0.01rem;
        img {
          width: 0.5rem;
        }
        .huihua{
          margin: -50px;
        }
      }
      .prosvip {
        width: 3rem;
        height: 1.1rem;
        position: absolute;
        bottom: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background-color: #4a423a;
        font-size: 0.3rem;
        color: #dfd2b6;
        display: flex;
        .circle {
          font-size: 0.5rem;
          text-align: center;
          margin-top: 0.15rem;
          margin-left: 0.15rem;
          line-height: 0.75rem;
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
          background-color: #57524a;
        }
        .text {
          margin-top: 0.13rem;
          width: 1.5rem;
          text-align: center;
        }
      }
    }
  }
  //中间资产列表
  .middle {
    background-color: rgb(255, 255, 255);
    padding: 0.4rem 0.4rem;
    margin-bottom: 0.3rem;
    .asetesstitle {
      font-size: 0.4rem;
    }
    .asetesslist {
      display: flex;
      justify-content: space-around;
      font-size: 0.4rem;
      .list {
        text-align: center;
        .lit{
          margin: -3px 2px 0 0;
         
        }
        div {
          padding: 0.1rem;
          font-weight: 700;
        }
        .text {
          font-weight: 400;
        }
      }
    }
  }
  //底座退出登录
  .exitLogin {
    button{
      margin-top: 20px;
      margin-bottom: 10px;
    }
  
  }
}
</style>